<style lang="scss" scoped>
    @import '../../css/statistics.scss';
    .chart-out{padding:30px 30px 330px 30px;background: #fff;}
    .chart-in{border:1px  solid #e1e7eb;padding: 20px 0px 20px 30px;background: #fff;}
    .bottom-text{padding-left: 30px;margin-top: 20px;color: $mc1;font-size: 16px;font-weight: bolder;}

</style>

<template>
    <section>

        <section class="breadcrumb-box clearfix">
            <el-breadcrumb separator=" > " class="fl">
                <el-breadcrumb-item>统计</el-breadcrumb-item>
                <el-breadcrumb-item v-if="$route.meta">{{$route.meta.title}}</el-breadcrumb-item>
            </el-breadcrumb>
        </section>

        <section class="chart-out mt">
            <section class="chart-in">
                <section id="main" style="width: 1000px;height: 500px">

                </section>
                <p class="bottom-text">平均签到出勤率：{{dataList.SignInRate}}，平均签退出勤率：{{dataList.SignOutRate}}，培训考试通过率：{{dataList.ExamPassRate}}</p>
            </section>

        </section>


    </section>
</template>

<script>

	import qs from 'qs'
	// 引入 ECharts 主模块
	var echarts = require('echarts/lib/echarts');
                // 引入柱状图
                require('echarts/lib/chart/bar');
                // 引入提示框和标题组件
                require('echarts/lib/component/tooltip');
                require('echarts/lib/component/title');

	export default{
		data: function(){
			return {
                dataList:'',
            }
		},
		mixins: [mixinMethods],
		methods: {


	    },
		mounted: function(){

			axios.post('/com/statistics/train', qs.stringify({

            })).then( (res) => {
                let d = res.data;
                if(d.flag == 1){
                    this.dataList = d.data;

					let main = document.getElementById('main');
                   let arr1  = this.dataList;
					var arr2 = [];
					for(var item in arr1){
						arr2.push(String(arr1[item]));
					}
                    var arr3 = [];
                    var arrPercent = [];
                    for(var i=0;i<arr2.length;i++){
                        if(arr2[i].indexOf("%")<0){
                        	arr3.push(arr2[i]);
                        }else{
							arrPercent.push(arr2[i]);
                        }
                    }
					console.log(arr3);
                    console.log(arrPercent);
                    let arr4 = arrPercent.splice(-3,3);  // 去除数据最后三个数据剩下的
                    console.log(arrPercent);
;

//                    let arr3 = ['2','3','2','2','1'];
//                    let arrPercent = ['20%','30%','20%','10%','30%'];
//                    doEchart(arr3,arrPercent,main);  // 测试数据

					doEchart(arr3,arrPercent,main);

                }
            } );

		}
	}





	function doEchart(arr,arrSec,main){
		if(window.attachEvent){
			window.attachEvent("onresize",function(){
				myChart.resize();
			});
		}else{
			window.addEventListener("resize",function(){
				myChart.resize();
			},false);
		};
		// 基于准备好的dom，初始化echarts实例
		var myChart = echarts.init(main);

		// 绘制图表
		myChart.setOption({
			title: {
				text: '培训数据汇总'
			},
			color: ['#689bf0'],
//			tooltip : {
//				trigger: 'axis',
//				axisPointer : {            // 坐标轴指示器，坐标轴触发有效
//					type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
//				}
//			},
			legend: {
				data:['总培训场次', '近一年培训场次', '近半年培训场次', '近三个月培训场次', '近一个月培训场次']
			},
			grid: {
				left: '3%',
				right: '10%',
				bottom: '3%',
				containLabel: true
			},
			xAxis : [
				{
					type : 'category',
					data : ['总培训场次', '近一年培训场次', '近半年培训场次', '近三个月培训场次', '近一个月培训场次'],
					axisTick: {
						alignWithLabel: true
					}
				}
			],
			yAxis : [
				{
					type : 'value',
                    minInterval : 1,
                    boundaryGap : [ 0, 0]
				}
			],
			series : [
				{
					name:'培训场次',
					type:'bar',
					barWidth: '30%',  //柱图宽度
					data:arr,
					barCategoryGap: '10%',
					itemStyle: {
						normal: {
							label: {
								show: true,
								position: 'top',
								textStyle: {
									fontWeight:'bolder',
									fontSize : '14',
									fontFamily : '微软雅黑',
									color: '#666a80',
								},
//								formatter:function(params,i){
//									if(params.value==0){
//										return '';
//									}else
//									{
//                                        //dataIndex
//										return params.data+' 员工覆盖率'+ arrSec[params.dataIndex];
//									}
//								}
							}
						}
					},
				}
			]
		});
    }

</script>